<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <style>
        :root {
            --theme-color: #FF9E1E;
        }
        html,
        body,
        #app {
            height: 100vh;
            margin: 0px;
            padding: 0px;
        }

        #loader-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: 999999;
            background: #fff;
        }

        #loader {
            display: block;
            position: absolute;
            left: 0;
            top: 150px;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #606266;
            -webkit-animation: spin 2s linear infinite;
            -ms-animation: spin 2s linear infinite;
            -moz-animation: spin 2s linear infinite;
            -o-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
        }

        #loader:before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #606266;
            -webkit-animation: spin 3s linear infinite;
            -moz-animation: spin 3s linear infinite;
            -o-animation: spin 3s linear infinite;
            -ms-animation: spin 3s linear infinite;
            animation: spin 3s linear infinite;
        }

        #loader:after {
            content: "";
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #606266;
            -moz-animation: spin 1.5s linear infinite;
            -o-animation: spin 1.5s linear infinite;
            -ms-animation: spin 1.5s linear infinite;
            -webkit-animation: spin 1.5s linear infinite;
            animation: spin 1.5s linear infinite;
        }


        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        #load_title {
            width: 200px;
            font-family: 'Open Sans';
            color: #606266;
            text-align: center;
            height: 30px;
            font-size: 20px;
            position: absolute;
            left: 0;
            top: 400px;
            bottom: 0;
            right: 0;
            margin: auto;
        }

        #nprogress .bar { 
            background: var(--theme-color) !important;
        } 
    </style>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <div id="loader-wrapper">
            <div id="loader"></div>
            <div id="load_title">正在加载,请耐心等待</div>
      </div>
    </div>
    <!-- built files will be auto injected -->
    <script>
         (function() {
            if (!sessionStorage.length) {
                // 这个调用能触发目标事件，从而达到共享数据的目的
                localStorage.setItem('getSessionStorage', Date.now());
            };

            // 该事件是核心
            window.addEventListener('storage', function(event) {
                if (event.key == 'getSessionStorage') {
                    // 已存在的标签页会收到这个事件
                    localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
                    localStorage.removeItem('sessionStorage');

                } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
                    // 新开启的标签页会收到这个事件
                    var data = JSON.parse(event.newValue),
                            value;

                    for (key in data) {
                        sessionStorage.setItem(key, data[key]);
                    }
                }
            });

            

            let themeData = {
                host: "",
                name: "上海云话科技有限公司",
                alias: "云话科技",
                logo: "http://testyzxfe.shyunhua.com/dev/manage/img/logo.025b2a1b.png",
                theme_color: "#C0242A",
                
            }
            document.head.querySelector("link").href = themeData.logo;
            document.title = themeData.alias + '管理平台';
            // if(!sessionStorage.getItem('yunhua-admin-theme')) {
                sessionStorage.setItem('yunhua-admin-theme', JSON.stringify(themeData));
            // }
        })();
    </script>
  </body>
</html>
